<template>
  <div class="applicationRecord">
    <div class="header">
      <van-nav-bar title="申请记录" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <section>
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="text"
        @load="onLoad"
        :offset="100"
        :immediate-check="false"
      >
      <ul v-if="recordData.list&&recordData.list.length>0">
        <li v-for="(item,index) in recordData.list"  :key="index">
          <div class="head">
            <p class="p1">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</p>
            <div class="p2">{{item.companyName}}</div>
            <p class="p1">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</p>
            <div class="p2">{{item.companyType}}</div>
            <p class="p1">代&nbsp;表 &nbsp;人：</p>
            <div class="p2">{{item.legalPerson}}</div>
            <p class="p1">注册资本：</p>
            <div class="p2">{{item.registeredCapital}}</div>
            <p class="p1">经营范围：</p>
            <div class="p2">{{item.businessScope}}</div>
          </div>
          <div class="foot">
            <p>提交申请 {{item.transactionDate}}</p>
             <div @click="link(item)">
               <span>查看办理进度</span>
               <van-icon name="arrow" />
             </div>
          </div>
        </li>
      </ul>
        <div class="empty" v-else>暂无数据</div>
      </van-list>
    </section>
  </div>
</template>

<script>
    export default {
        name: "applicationRecord",
      data() {
        return {
          recordData:[],
          recordDataList:[],
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',

        }
      },
      mounted() {
        this.getApplicationRecordData();

      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        link(item){
          this.$router.push({path: '/processingProgress', query:{id:item.id,companyName:item.companyName}})
        },
        //获取预订记录信息
        async getApplicationRecordData() {
          let params = {
            pageNum: this.pageNum,
            pageSize:10,
          };
          const res = await this.$axios.post(this.$api.applicationRecordData,params);
          if (res.success) {
            if (this.loading) {
              this.recordDataList = this.recordDataList.concat(res.data.list);
              this.recordData = res.data;
              this.recordData.list = this.recordDataList;
              if (this.recordData.list.length >= this.recordData.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.recordData = res.data;
              if (this.recordData.list.length >= this.recordData.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },
        //下拉刷新
        onRefresh() {
          this.getApplicationRecordData()
        },
        //上拉加载
        onLoad() {
          if (this.recordData.list && this.recordData.list.length > 0) {
            this.getApplicationRecordData();

          }
        },
      }
    }
</script>

<style scoped>
  .applicationRecord{width: 100%;background-color: #f7f7f7;}
  section{padding-top: 0.46rem;}
  section ul li{width: 94%;margin: 0.1rem 3% 0;background-color: #fff;padding-top: 0.1rem;border-radius: 0.05rem;}
  .head{padding-bottom:0.06rem; overflow: hidden;}
  .p1{float: left;width: 29%;line-height: 0.24rem;text-align: right;padding-left: 0.15rem;color: #b0b0b0;}
  .p2{float: left;width: 2rem;line-height: 0.24rem;padding-left: 0.1rem;height: 0.24rem;}
  .foot{width: 90%;margin: 0 5%;border-top: 1px solid #f7f7f7;overflow: hidden;line-height: 0.43rem;}
  .foot p{float: left;color: #b0b0b0;}
  .foot div{float: right; }
  .foot div i{font-size: 0.14rem;position: relative;top:0.03rem;}
  .empty{
    text-align:center;
    width:100%;
    color:#999999;
    font-size:.16rem;
    padding:.2rem;
  }
</style>
